import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../constants.dart';
import '../../../theme.dart';
import 'logic.dart';

class ForgetPasswordPage extends StatelessWidget {
  ForgetPasswordPage({Key? key}) : super(key: key);

  final ForgetPasswordLogic logic = Get.put(ForgetPasswordLogic());

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text('输入验证码找回密码'),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back_ios,
              size: 16.w,
            ),
            onPressed: () {
              Get.back();
            },
          ),
        ),
        body: Container(
          padding: EdgeInsets.all(kSpaceMedium),
          margin: EdgeInsets.symmetric(
            vertical: kSpaceMedium,
            horizontal: kSpaceSmall,
          ),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(kRadiusMedium),
          ),
          child: Form(
            key: logic.formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '手机号',
                  style: TextStyle(
                    fontSize: kFontSizeSmall,
                    color: AppColor.colorFontBlack,
                  ),
                ),
                SizedBox(height: 10.w),
                TextFormField(
                  controller: logic.mobileController,
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    hintText: '请输入手机号',
                    hintStyle: TextStyle(
                      fontSize: kFontSizeSmall,
                      color: AppColor.colorFontHint,
                    ),
                    border: InputBorder.none,
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return '请输入手机号';
                    }
                    return null;
                  },
                ),
                SizedBox(height: kSpaceMedium),
                Text(
                  '验证码',
                  style: TextStyle(
                    fontSize: kFontSizeSmall,
                    color: AppColor.colorFontBlack,
                  ),
                ),
                SizedBox(height: 10.w),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(kRadiusSmall),
                    border: Border.all(
                      color: AppColor.colorBorderGrey,
                      width: 0.5.w,
                    ),
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child: TextFormField(
                          decoration: InputDecoration(
                            hintText: '请输入验证码',
                            hintStyle: TextStyle(
                              color: AppColor.colorFontHint,
                              fontSize: kFontSizeSmall,
                            ),
                            fillColor: Colors.transparent,
                            filled: true,
                            contentPadding: EdgeInsets.symmetric(
                                vertical: 14.w, horizontal: 14.w),
                            border: const OutlineInputBorder(
                                borderSide: BorderSide.none),
                          ),
                          keyboardType: TextInputType.number,
                          controller: logic.codeController,
                          inputFormatters: <TextInputFormatter>[
                            FilteringTextInputFormatter.digitsOnly
                          ],
                        ),
                      ),
                      Container(
                        width: 0.5.w,
                        height: 20.w,
                        color: AppColor.colorFontHint,
                      ),
                      TextButton(
                        onPressed: logic.isSending.value
                            ? null
                            : () => {logic.getSmsCode()},
                        style: ButtonStyle(
                          padding: WidgetStatePropertyAll(EdgeInsets.all(14.w)),
                          shape: WidgetStatePropertyAll(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(kRadiusSmall),
                            ),
                          ),
                        ),
                        child: Text(
                          logic.isSending.value
                              ? '(${logic.countdown.value})s后重试'
                              : '获取验证码',
                          style: TextStyle(
                            fontSize: kFontSizeSmall,
                            color: AppColor.colorMain,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: kSpaceBig),
                SizedBox(
                  width: double.infinity,
                  height: 50.w,
                  child: FilledButton(
                    onPressed: () => logic.submit(),
                    child: const Text('确认'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
